<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			tr{
				height: 70px;
			}
			td,th{
				width: 150px;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			function addNOde(){
				//创建节点
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				//HTML中可以识别标签			onblur  失去焦点时 	this在这里是本身的意思，指整个input
				td1.innerHTML="<input type='text' size='10px' onblur='seaveVal(this)'/>"
				var td2 = document.createElement("td");
				td2.innerHTML="<input type='text' size='10px' onblur='seaveVal(this)'/>"
				var td3 = document.createElement("td");
				td3.innerHTML="<input type='button' value='添加' onclick='addNOde()' />"
							  +"<input type='button' value='删除' onclick='removeNode(this)'/>"
				//获得table对象
				var tab = document.getElementById("tab");
				//将tr放进去
				tab.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				
			}
			//thi是this,把值传进来
			function seaveVal(thi){
				//获得父级节点    将值放在父级标签 td中
				var td = thi.parentNode;
				td.innerText=thi.value;//把值赋给父级元素
			}
			
			function removeNode(thi){
				//删除整个tr,就全删除    所以找到thi(input)的父级（td）的父级（tr）
				var tr = thi.parentNode.parentNode;
				tr.remove();
			}
		</script>
	</head>
	<body>
		<table border="1px" align="center" id="tab">
			<tr>
				<th>图书名称</th>
				<th>图书价格</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>javase</td>
				<td>19</td>
				<td>
					<input type="button" name="" id="" value="添加" onclick="addNOde()" />
					<input type="button" name="" id="" value="删除" onclick='removeNode()' />
				</td>
			</tr>
			<tr>
				<td>javaEE</td>
				<td>29</td>
				<td>
					<input type="button" name="" id="" value="添加" onclick="addNOde()"/>
					<input type="button" name="" id="" value="删除" onclick='removeNode()' />
				</td>
			</tr>
			
		</table>
	</body>
</html>
